<template>
	<view class="pay-fail-container">
		<!-- 付款失败状态 -->
		<view class="fail-status">
			<text class="fail-title">付款失败</text>
			<text class="fail-tip">请尽快完成付款</text>
			<text class="fail-warning">否则订单会被系统取消</text>
			<view class="action-buttons">
				<view class="btn view-order-btn" @click="viewOrder">
					<text class="btn-text">查看订单</text>
				</view>
				<view class="btn repay-btn" @click="repay">
					<text class="btn-text">重新支付</text>
				</view>
			</view>
		</view>
		
		
		<!-- <view class="divider"></view>
		
		
		<view class="order-details">
			<view class="recipient-info">
				<text class="name">亮亮</text>
				<text class="phone">189****1688</text>
			</view>
			<text class="address">广东省深圳市西丽镇沙河西路12号丽新花园6栋602号</text>
			<text class="payment-amount">应付 ¥168.00</text>
		</view>
		
	
		<view class="divider"></view>
		
		
		<view class="recommend-section">
			<text class="recommend-title">为你推荐</text>
			<view class="recommend-list">
				<view class="recommend-item" v-for="(item, index) in recommendGoods" :key="index" @click="viewProduct(item)">
					<image class="recommend-img" :src="item.image" mode="aspectFill"></image>
					<text class="recommend-name">{{ item.name }}</text>
					<text class="recommend-price">¥{{ item.price }}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommendGoods: [
					{
						id: 1,
						name: '钩花蕾丝衬衣',
						price: '510',
						image: '/static/c1.png'
					},
					{
						id: 2,
						name: '时尚甜美蕾丝短袖衬衣',
						price: '496',
						image: '/static/c2.png'
					},
					{
						id: 3,
						name: '精选好物3',
						price: '399',
						image: '/static/c3.png'
					},
					{
						id: 4,
						name: '精选好物4',
						price: '456',
						image: '/static/c1.png'
					}
				]
			}
		},
		methods: {
			// 查看订单
			viewOrder() {
				uni.navigateTo({
					url: '/pages/myorders/myorders'
				});
			},
			
			// 重新支付  
			repay() {
				uni.navigateBack();
			},
			
			// 查看商品
			viewProduct(item) {
				uni.showToast({
					title: `查看${item.name}`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.pay-fail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 0;
	}
	
	/* 付款失败状态 */
	.fail-status {
		background-color: #fff;
		padding: 60rpx 30rpx 40rpx;
		text-align: center;
	}
	
	.fail-title {
		display: block;
		font-size: 48rpx;
		color: #ff2a3a;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.fail-tip {
		display: block;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.fail-warning {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-bottom: 40rpx;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	.btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #ddd;
		background-color: #fff;
	}
	
	.repay-btn {
		background-color: #ff2a3a;
		border-color: #ff2a3a;
	}
	
	.btn-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.repay-btn .btn-text {
		color: #fff;
	}
	
	/* 分割线 */
	.divider {
		height: 20rpx;
		background-color: #f5f5f5;
	}
	
	/* 订单详情 */
	.order-details {
		background-color: #fff;
		padding: 30rpx;
	}
	
	.recipient-info {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.name {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-right: 20rpx;
	}
	
	.phone {
		font-size: 28rpx;
		color: #666;
	}
	
	.address {
		display: block;
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
		margin-bottom: 15rpx;
	}
	
	.payment-amount {
		display: block;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	/* 为你推荐 */
	.recommend-section {
		background-color: #fff;
		padding: 30rpx;
	}
	
	.recommend-title {
		display: block;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.recommend-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}
	
	.recommend-item {
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.recommend-img {
		width: 100%;
		height: 300rpx;
	}
	
	.recommend-name {
		display: block;
		font-size: 26rpx;
		color: #333;
		padding: 15rpx;
		line-height: 1.3;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.recommend-price {
		display: block;
		font-size: 28rpx;
		color: #ff2a3a;
		font-weight: bold;
		padding: 0 15rpx 15rpx;
	}
</style>
